<template>
  <div>
    <el-dialog
      style="width: 60%"
      title="快速留证"
      class="el-icon-camera"
      :modal="true"
      :visible.sync="dialogFormVisible"
    >
      <div slot="title" class="dialog-title">
        <i class="el-icon-camera-solid"></i>
        <span class="title-text" style="margin-left:20px">快速留证</span>
        <div class="button-right">
          <span class="title-close" @click="cancel"></span>
        </div>
      </div>
        <div  class="dialog-footer-upload">
            <div style='margin:auto 0' icon="el-icon-question">证据链接</div>
            <div>
              <!-- <el-button size="small" @click="downloadfile=!downloadfile">{{downloadfile?"下载模板":''}}</el-button> -->
                 <el-button type="small" @click="uploadIsShow = !uploadIsShow">{{
              uploadIsShow ? "点击上传" : "手动输入"
            }}</el-button>
            </div>
          </div>
      <el-form
        :model="form"
        label-width="100%"
        style="width: 90%; margin-left: 20px"
        label-position="top"
      >
        <el-form-item>
        
          <el-input
            placeholder="请输入留证url 一行为一条网址"
            v-show="uploadIsShow"
            :autosize="{ minRows: 4, maxRows: 100 }"
            type="textarea"
            v-model="urls"
            autocomplete="off"
          ></el-input>
          <el-upload
            v-show="!uploadIsShow"
            class="upload-demo"
            drag
            action="https://jsonplaceholder.typicode.com/posts/"
          >
            <i class="el-icon-upload"></i>
            <div class="el-upload__text">
              将文件拖到此处，或<em>点击上传</em>
            </div>
            <div class="el-upload__tip" slot="tip">
              只能上传excel文件，且url不超过100条
              <el-link href="http://cs-hold.oss-cn-shanghai.aliyuncs.com/static/模板.xlsx" target="blank" type="primary" :underline="false">下载模板</el-link>
            </div>
          </el-upload>
        </el-form-item>
        <el-form-item label="标签" v-show="false">
          <div id="coldiv">
            <el-row>
              <el-col :span="24">
                <div id="dialog-input-text1" class="dialog-input-text1">
                  <el-tag
                    v-for="(tag1, index) in form.evidence_status"
                    :key="index"
                    v-model="form.evidence_status"
                    closable
                    :disable-transitions="false"
                    @close="handleClose(tag1)"
                  >
                    {{ tag1 }}
                  </el-tag>
                </div>
              </el-col>
            </el-row>
          </div>
          <div>
            <label>热门标签:</label>
            <el-tag
              style="margin: '10px'"
              v-for="tag in labelOptions"
              :key="tag"
              :disable-transitions="false"
              @click="handleData(tag)"
            >
              {{ tag }}
            </el-tag>
            <el-input
              v-if="inputVisible"
              ref="saveTagInput"
              v-model="inputValue"
              class="input-new-tag"
              size="small"
              @keyup.enter.native="handleInputConfirm"
              @blur="handleInputConfirm"
            />
            <el-button
              v-else
              class="button-new-tag"
              size="small"
              @click="showInput"
              >+ 新标签
            </el-button>
          </div>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取消</el-button>
        <el-button type="primary" @click="submitForm">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { fetchEvidence,createEvidence } from "@/api/evidence";
import tagColors from "@/views/table/tagColors.json";
const labelOptionsx = ["涉毒", "涉黄", "教育相关", "医疗相关"];
export default {
  props: ["modify", "headers", "dialogFormVisibleT"],
  components: {},
  created() {
  },
  data() {
    return {
      uploadIsShow: true,
      tagColors: tagColors,
      tagC: "white",
      dialogFormVisible: false,
      labelOptions: labelOptionsx,
      inputVisible: null,
      inputValue: "",
      urls:'',
      listQuery: {
        case_id: "",
        page: 1,
        page_size: 10,
      },
       total_num: 0,
      count_fail:0,
      count_success:0,
      count_progress:0,
      form: {
        case_id: "",
        title: null,
        url: [],
        case_status: null,
        evidence_status: [],
        evidence_creater: null,
        start_time: null,
        update_time: null,
      },
      rules: {},
    };
  },
  watch: {
    modify: function () {
      this.form = this.modify;
      this.dialogFormVisible = this.dialogFormVisibleT;
      console.log(this.dialogFormVisible);
    },
  },
  methods: {
    submitForm() {
      console.log(12132131)
      // 判断文本域是否换行
      this.form.case_id = JSON.parse(sessionStorage.getItem('rowkey')).id
      console.log(this.form.case_id)
        // let n = "\n" + "";
        // this.form.url=this.form.url.replace(new RegExp(n,"g"),",")
        this.form.url = this.urls.split("\n");
        // 清除数组中，空的url
        for (var i = 0; i < this.form.url.length; i++) {
          if (
            this.form.url[i] == "" ||
            typeof this.form.url[i] == "undefined"
          ) {
            this.form.url.splice(i, 1);
            i = i - 1;
          }
        }
        createEvidence(this.form).then(()=>{
           this.$emit('changeList',[]);
          //  this.$emit.getList();
          this.$notify({
            // title: "Success",
            message: "创建成功",
            type: "success",
            duration: 2000
          });
        });
      this.dialogFormVisible = false;
      this.urls=""
    },
//       getList() {
//       this.listQuery.case_id = this.caseDetail.id;
//       this.listQuery.evidence_creater = this.caseDetail.case_creater;
//       //this.listQuery.case_id = "f7efa98e";
//       fetchEvidence(this.listQuery).then((response) => {
//         console.log(response)
//         console.log(response.data.total_num)
//          this.count_fail=response.data.count_fail;
//         this.count_success=response.data.count_success;
//         this.count_progress=response.data.count_progress;
//         this.total_num = this.count_fail+this.count_success+this.count_progress;
//           console.log(this.listQuery)
//         //this.total_num = response.data.total_num;
//         if (this.total_num >= 0) {
//            for (let i in response.data.list) {
//             this.list.push(JSON.parse(JSON.stringify(response.data.list[i])));
           
//           }
//         } else {
//           this.list = null;
//         }
//       });
//     },
    handleInputConfirm() {
      let inputValue = this.inputValue;
      if (inputValue) {
        this.form.evidence_status.push(inputValue);
      }
      this.inputVisible = false;
      this.inputValue = "";
    },
    handleData(tag) {
      let inputValue = tag;
      if (
        inputValue != null &&
        this.form.evidence_status.indexOf(inputValue) <= -1
      ) {
        this.form.evidence_status.push(inputValue);
      } else {
        this.$message({
          message: "不能重复添加标签",
          type: "warning",
        });
      }
      this.inputVisible = false;
    },
    handleClose(tag) {
      this.form.evidence_status.splice(
        this.form.evidence_status.indexOf(tag),
        1
      );
    },
    showInput() {
      this.inputVisible = true;
      this.$nextTick((_) => {
        this.$refs.saveTagInput.$refs.input.focus();
      });
    },
    cancel() {
      this.$emit("cancel");
    },
  },
};
</script>
<style scoped>
#coldiv {
  border-radius: 4px;
  border: 1px solid #dcdfe6;
}
.dialog-input-text1 ::v-deep .el-input__inner {
  border: 0;
}
.dialog-footer-upload{
  display: flex;
  padding: 0 20px;
  justify-content: space-between; 
  width: 95%;
}
.el-icon-camera::v-deep.el-dialog__wrapper {
  overflow-y:hidden;
  margin: auto;
  width: 100;
}
</style>